<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Badge 徽章 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
<div class="row">
    <div class="col">
        <div class="alert alert-light alert-elevate fade show" role="alert">
            <div class="alert-icon"><i class="flaticon-warning e-font-brand"></i></div>
            <div class="alert-text">
                基于<code>Bootstrap Badge</code>，可前往<a class="e-link e-font-bold" href="https://getbootstrap.com/docs/4.3/components/badge/" target="_blank">查看详细API</a>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">

        <!--begin::Card-->
        <div class="card">
            <div class="card-head">
                <div class="card-head-label">
                    <h3 class="card-head-title">
                        基础
                    </h3>
                </div>
            </div>
            <div class="card-body">

                <!--begin::Section-->
                <div class="e-section">
                    <span class="e-section-info">
                        你可以在<code>span.badge</code>上添加<code>.badge-*</code>设置不同的状态
                    </span>
                    <div class="e-section-content e-section-content--solid">
                        <span class="badge badge-brand">3</span>
                        <span class="badge badge-dark">4</span>
                        <span class="badge badge-primary">7</span>
                        <span class="badge badge-success">8</span>
                        <span class="badge badge-info">11</span>
                        <span class="badge badge-warning">2</span>
                        <span class="badge badge-danger">5</span>
                    </div>
                </div>

                <!--end::Section-->

                <!--begin::Section-->
                <div class="e-section">
                    <div class="e-section-content e-section-content--solid">
                        <span class="badge badge-brand">3</span>
                        <span class="badge badge-dark">4</span>
                        <span class="badge badge-primary  badge--inline badge--pill">new</span>
                        <span class="badge badge-success  badge--inline badge--pill">hot</span>
                        <span class="badge badge-info  badge--rounded">11</span>
                        <span class="badge badge-warning  badge--rounded">2</span>
                        <span class="badge badge-danger  badge--rounded">5</span>
                    </div>
                </div>

                <!--end::Section-->
            </div>
        </div>

        <!--end::Card-->

        <!--begin::Card-->
        <div class="card">
            <div class="card-head">
                <div class="card-head-label">
                    <h3 class="card-head-title">
                        尺寸
                    </h3>
                </div>
            </div>
            <div class="card-body">

                <!--begin::Section-->
                <div class="e-section">
                    <span class="e-section-info">
                        你可以在<code>span.badge</code>上添加<code>.badge--md</code>设置使用中等尺寸
                    </span>
                    <div class="e-section-content e-section-content--solid">
                        <span class="badge badge-brand badge--md">A</span>
                        <span class="badge badge-dark badge--md">B</span>
                        <span class="badge badge-primary badge--md">S</span>
                        <span class="badge badge-success badge--md">D</span>
                        <span class="badge badge-info badge--md">F</span>
                        <span class="badge badge-warning badge--md">R</span>
                        <span class="badge badge-danger badge--md">L</span>
                    </div>
                    <div class="e-separator e-separator--border-dashed"></div>
                    <div class="e-section-content e-section-content--solid">
                        <span class="badge badge-brand badge--md badge--rounded">A</span>
                        <span class="badge badge-dark badge--md badge--rounded">B</span>
                        <span class="badge badge-primary badge--md badge--rounded">S</span>
                        <span class="badge badge-success badge--md badge--rounded">D</span>
                        <span class="badge badge-info badge--md badge--rounded">F</span>
                        <span class="badge badge-warning badge--md badge--rounded">R</span>
                        <span class="badge badge-danger badge--md badge--rounded">L</span>
                    </div>
                </div>

                <!--end::Section-->

                <!--begin::Section-->
                <div class="e-section">
                    <span class="e-section-info">
                        你可以在<code>span.badge</code>上添加<code>.badge--lg</code>设置使用大尺寸
                    </span>
                    <div class="e-section-content e-section-content--solid">
                        <span class="badge badge-brand badge--lg">A</span>
                        <span class="badge badge-dark badge--lg">B</span>
                        <span class="badge badge-primary badge--lg">S</span>
                        <span class="badge badge-success badge--lg">D</span>
                        <span class="badge badge-info badge--lg">F</span>
                        <span class="badge badge-warning badge--lg">R</span>
                        <span class="badge badge-danger badge--lg">L</span>
                    </div>
                    <div class="e-separator e-separator--border-dashed"></div>
                    <div class="e-section-content e-section-content--solid">
                        <span class="badge badge-brand badge--lg badge--rounded">A</span>
                        <span class="badge badge-dark badge--lg badge--rounded">B</span>
                        <span class="badge badge-primary badge--lg badge--rounded">S</span>
                        <span class="badge badge-success badge--lg badge--rounded">D</span>
                        <span class="badge badge-info badge--lg badge--rounded">F</span>
                        <span class="badge badge-warning badge--lg badge--rounded">R</span>
                        <span class="badge badge-danger badge--lg badge--rounded">L</span>
                    </div>
                </div>

                <!--end::Section-->

                <!--begin::Section-->
                <div class="e-section">
                    <span class="e-section-info">
                        你可以在<code>span.badge</code>上添加<code>.badge--xl</code>设置使用超大尺寸
                    </span>
                    <div class="e-section-content e-section-content--solid">
                        <span class="badge badge-brand badge--xl">A</span>
                        <span class="badge badge-dark badge--xl">B</span>
                        <span class="badge badge-primary badge--xl">S</span>
                        <span class="badge badge-success badge--xl">D</span>
                        <span class="badge badge-info badge--xl">F</span>
                        <span class="badge badge-warning badge--xl">R</span>
                        <span class="badge badge-danger badge--xl">L</span>
                    </div>
                    <div class="e-separator e-separator--border-dashed"></div>
                    <div class="e-section-content e-section-content--solid">
                        <span class="badge badge-brand badge--xl badge--rounded">A</span>
                        <span class="badge badge-dark badge--xl badge--rounded">B</span>
                        <span class="badge badge-primary badge--xl badge--rounded">S</span>
                        <span class="badge badge-success badge--xl badge--rounded">D</span>
                        <span class="badge badge-info badge--xl badge--rounded">F</span>
                        <span class="badge badge-warning badge--xl badge--rounded">R</span>
                        <span class="badge badge-danger badge--xl badge--rounded">L</span>
                    </div>
                </div>

                <!--end::Section-->
            </div>
        </div>

        <!--end::Card-->

        <!--begin::Card-->
        <div class="card">
            <div class="card-head">
                <div class="card-head-label">
                    <h3 class="card-head-title">
                        淡色
                    </h3>
                </div>
            </div>
            <div class="card-body">

                <!--begin::Section-->
                <div class="e-section">
                    <span class="e-section-info">
                        你可以在<code>span.badge</code>上添加<code>.badge--unified-*</code>设置淡色风格
                    </span>
                    <div class="e-section-content e-section-content--solid">
                        <span class="badge badge--unified-brand badge--lg badge--bold">A</span>
                        <span class="badge badge--unified-primary badge--lg badge--bold">S</span>
                        <span class="badge badge--unified-success badge--lg badge--bold">D</span>
                        <span class="badge badge--unified-info badge--lg badge--bold">F</span>
                        <span class="badge badge--unified-warning badge--lg badge--bold">R</span>
                        <span class="badge badge--unified-danger badge--lg badge--bold">L</span>
                    </div>
                    <div class="e-separator e-separator--border-dashed"></div>
                    <div class="e-section-content e-section-content--solid">
                        <span class="badge badge--unified-brand badge--lg badge--rounded badge--bold">A</span>
                        <span class="badge badge--unified-primary badge--lg badge--rounded badge--bold">S</span>
                        <span class="badge badge--unified-success badge--lg badge--rounded badge--bold">D</span>
                        <span class="badge badge--unified-info badge--lg badge--rounded badge--bold">F</span>
                        <span class="badge badge--unified-warning badge--lg badge--rounded badge--bold">R</span>
                        <span class="badge badge--unified-danger badge--lg badge--rounded badge--bold">L</span>
                    </div>
                </div>

                <!--end::Section-->
            </div>
        </div>

        <!--end::Card-->
    </div>
    <div class="col-md-6">

        <!--begin::Card-->
        <div class="card">
            <div class="card-head">
                <div class="card-head-label">
                    <h3 class="card-head-title">
                        更多风格
                    </h3>
                </div>
            </div>
            <div class="card-body">

                <!--begin::Section-->
                <div class="e-section">
                    <span class="e-section-info">
                        你可以在<code>span.badge</code>上添加<code>.badge--square</code>设置使用方形
                    </span>
                    <div class="e-section-content e-section-content--solid">
                        <span class="badge badge-brand badge--square">3</span>
                        <span class="badge badge-dark badge--square">4</span>
                        <span class="badge badge-primary badge--square">7</span>
                        <span class="badge badge-success badge--square">8</span>
                        <span class="badge badge-info badge--square">11</span>
                        <span class="badge badge-warning badge--square">2</span>
                        <span class="badge badge-danger badge--square">5</span>
                    </div>
                </div>

                <!--end::Section-->

                <!--begin::Section-->
                <div class="e-section">
                    <span class="e-section-info">
                        你可以在<code>span.badge</code>上添加<code>badge--dot</code>设置使用圆点
                    </span>
                    <div class="e-section-content e-section-content--solid">
                        <span class="badge badge-brand badge--dot badge--sm"></span>
                        <span class="badge badge-dark badge--dot badge--sm"></span>
                        <span class="badge badge-primary badge--dot badge--sm"></span>
                        <span class="badge badge-success badge--dot badge--sm"></span>
                        <span class="badge badge-info badge--dot badge--sm"></span>
                        <span class="badge badge-warning badge--dot badge--sm"></span>
                        <span class="badge badge-danger badge--dot badge--sm"></span>
                        <div class="e-space-20"></div>
                        <span class="badge badge-brand badge--dot"></span>
                        <span class="badge badge-dark badge--dot"></span>
                        <span class="badge badge-primary badge--dot"></span>
                        <span class="badge badge-success badge--dot"></span>
                        <span class="badge badge-info badge--dot"></span>
                        <span class="badge badge-warning badge--dot"></span>
                        <span class="badge badge-danger badge--dot"></span>
                        <div class="e-space-20"></div>
                        <span class="badge badge-brand badge--dot badge--lg"></span>
                        <span class="badge badge-dark badge--dot badge--lg"></span>
                        <span class="badge badge-primary badge--dot badge--lg"></span>
                        <span class="badge badge-success badge--dot badge--lg"></span>
                        <span class="badge badge-info badge--dot badge--lg"></span>
                        <span class="badge badge-warning badge--dot badge--lg"></span>
                        <span class="badge badge-danger badge--dot badge--lg"></span>
                        <div class="e-space-20"></div>
                        <span class="badge badge-brand badge--dot badge--xl"></span>
                        <span class="badge badge-dark badge--dot badge--xl"></span>
                        <span class="badge badge-primary badge--dot badge--xl"></span>
                        <span class="badge badge-success badge--dot badge--xl"></span>
                        <span class="badge badge-info badge--dot badge--xl"></span>
                        <span class="badge badge-warning badge--dot badge--xl"></span>
                        <span class="badge badge-danger badge--dot badge--xl"></span>
                        <div class="e-separator e-separator--dashed"></div>
                        <span class="e-section-info">
                            你可以在<code>span.badge</code>前添加文字
                        </span>
                        <div class="e-space-20"></div>
                        Brand <span class="badge badge-brand badge--dot"></span>
                        Primary <span class="badge badge-primary badge--dot"></span>
                        Info <span class="badge badge-info badge--dot"></span>
                        Danger <span class="badge badge-danger badge--dot"></span>
                        <div class="e-space-20"></div>
                        Brand <span class="badge badge-brand badge--dot badge--sm"></span>
                        Primary <span class="badge badge-primary badge--dot badge--sm"></span>
                        Info <span class="badge badge-info badge--dot badge--sm"></span>
                        Danger <span class="badge badge-danger badge--dot badge--sm"></span>
                    </div>
                </div>

                <!--end::Section-->

                <!--begin::Section-->
                <div class="e-section">
                    <span class="e-section-info">
                        你可以在<code>span.badge</code>上添加<code>.badge--inline</code>并输入文字
                    </span>
                    <div class="e-section-content e-section-content--solid">
                        <span class="badge badge-success badge--inline">success</span>
                        <span class="badge badge-info badge--inline">info</span>
                        <span class="badge badge-warning badge--inline">warning</span>
                        <span class="badge badge-danger badge--inline">danger</span>
                        <span class="badge badge-brand badge--inline">brand</span>
                        <span class="badge badge-dark badge--inline">dark</span>
                        <span class="badge badge-primary badge--inline">primary</span>
                    </div>
                </div>

                <!--end::Section-->

                <!--begin::Section-->
                <div class="e-section">
                    <span class="e-section-info">
                        你可以在<code>span.badge</code>上添加<code>.badge--rounded</code>设置徽章使用胶囊效果
                    </span>
                    <div class="e-section-content e-section-content--solid">
                        <span class="badge badge-success badge--inline badge--pill">success</span>
                        <span class="badge badge-info badge--inline badge--pill">info</span>
                        <span class="badge badge-warning badge--inline badge--pill">warning</span>
                        <span class="badge badge-danger badge--inline badge--pill">danger</span>
                        <span class="badge badge-brand badge--inline badge--pill">brand</span>
                        <span class="badge badge-dark badge--inline badge--pill">dark</span>
                        <span class="badge badge-primary badge--inline badge--pill">primary</span>
                    </div>
                </div>

                <!--end::Section-->
            </div>
        </div>

        <!--end::Card-->

        <!--begin::Card-->
        <div class="card">
            <div class="card-head">
                <div class="card-head-label">
                    <h3 class="card-head-title">
                        边框
                    </h3>
                </div>
            </div>
            <div class="card-body">
                <!--begin::Section-->
                <div class="e-section">
                    <span class="e-section-info">
                        你可以在<code>span.badge</code>上添加<code>.badge--outline</code>设置徽章使用边框效果
                    </span>
                    <div class="e-section-content e-section-content--solid">
                        <span class="badge badge--outline badge-dark">3</span>
                        <span class="badge badge--outline badge-info">4</span>
                        <span class="badge badge--outline badge-danger">7</span>
                        <span class="badge badge--outline badge-primary">8</span>
                        <span class="badge badge--outline badge-warning">1</span>
                        <span class="badge badge--outline badge-success">2</span>
                        <span class="badge badge--outline badge-brand">5</span>
                        <div class="e-separator e-separator--border-dashed"></div>
                        <span class="e-section-info">
                        你可以在<code>span.badge</code>上添加<code>.badge--outline-2x</code>设置徽章使用加粗边框效果
                    </span>
                        <span class="badge badge--outline badge--outline-2x badge-dark">3</span>
                        <span class="badge badge--outline badge--outline-2x badge-info">4</span>
                        <span class="badge badge--outline badge--outline-2x badge-danger">7</span>
                        <span class="badge badge--outline badge--outline-2x badge-primary">8</span>
                        <span class="badge badge--outline badge--outline-2x badge-warning">1</span>
                        <span class="badge badge--outline badge--outline-2x badge-success">2</span>
                        <span class="badge badge--outline badge--outline-2x badge-brand">5</span>
                    </div>
                </div>

                <!--end::Section-->
            </div>
        </div>

        <!--end::Card-->

        <!--begin::Card-->
        <div class="card">
            <div class="card-head">
                <div class="card-head-label">
                    <h3 class="card-head-title">
                        堆叠
                    </h3>
                </div>
            </div>
            <div class="card-body">

                <!--begin::Section-->
                <div class="e-section">
                    <span class="e-section-info">
                        你可以<code>div.badge.badge-pics</code>放入多个<code>a/span.badge-pic</code>实现堆叠效果
                    </span>
                    <div class="e-section-content e-section-content--solid">
                        <div class="badge badge-pics">
                            <a href="#" class="badge-pic" data-toggle="e-tooltip" data-skin="brand" data-placement="top" title="" data-original-title="啊">
                                <img src="/assets/media/portrait/200*200-1.jpg" alt="image">
                            </a>
                            <a href="#" class="badge-pic" data-toggle="e-tooltip" data-skin="brand" data-placement="top" title="" data-original-title="啊啊">
                                <img src="/assets/media/portrait/200*200-2.jpg" alt="image">
                            </a>
                            <a href="#" class="badge-pic" data-toggle="e-tooltip" data-skin="brand" data-placement="top" title="" data-original-title="啊啊啊">
                                <img src="/assets/media/portrait/200*200-3.jpg" alt="image">
                            </a>
                            <a href="#" class="badge-pic" data-toggle="e-tooltip" data-skin="brand" data-placement="top" title="" data-original-title="啊啊啊啊">
                                <img src="/assets/media/portrait/200*200-4.jpg" alt="image">
                            </a>
                            <a href="#" class="badge-pic" data-toggle="e-tooltip" data-skin="brand" data-placement="top" title="" data-original-title="啊啊啊啊啊">
                                <img src="/assets/media/portrait/200*200-5.jpg" alt="image">
                            </a>
                            <a href="#" class="badge-pic  badge-pic--last">
                                +2
                            </a>
                        </div>
                    </div>
                </div>
                <!--end::Section-->
            </div>
        </div>
        <!--end::Card-->
    </div>
</div>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
</body>
</html>